<template>
  <div>
    <section id="todoapp">
      <header class="header">
        <h1>备忘录</h1>
        <input 
          v-model="inputValue"
          @keyup.enter="addTodo"
          placeholder="请输入任务"
          autofocus="autofocus"
          autocomplete="off"
          class="new-todo" 
        />
      </header>
      <section class="main" v-show="list.length > 0">
        <ul class="todo-list">
          <li 
            class="todo" 
            v-for="(item, idx) in list" 
            :key="idx"
          >
            <div class="view">
              <span class="index">{{ idx + 1 }}.</span>
              <label>{{ item }}</label>
              <button 
                class="destroy" 
                @click="removeTodo(idx)"
              ></button>
            </div>
          </li>
        </ul>
      </section>
      <footer 
        class="footer" 
        v-show="list.length > 0"
      >
        <span class="todo-count">
          <strong>{{ list.length }}</strong> items left
        </span>
        <button 
          class="clear-completed" 
          @click="clearAll"
        >
          Clear
        </button>
      </footer>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['完成唱跳Rap', '多多学习', '多喝热水'],
      inputValue: ''
    }
  },
  methods: {
    addTodo() {
      const text = this.inputValue.trim();
      if (text) {
        this.list.push(text);
        this.inputValue = '';
      }
    },
    removeTodo(idx) {
      this.list.splice(idx, 1);
    },
    clearAll() {
      this.list = [];
    }
  }
}
</script>

<style lang="less" scoped>
@import url("./assets/todolist/css/index.css");
</style>



